<template>
	<view>
		<u-search class="search" :value="keyword" :clearabled="true" :showAction="false" @change="getFocus"></u-search>
		<!-- 历史搜索记录 -->
		<block v-if="isShow">
			<view class="history_box">
				<view class="history_tit">
					<text>搜索记录</text>
				</view>
				<view class="history_list">
					<view v-for="(item,i) in histortList" :key="i" @click="search_ipt(item)">
						{{item}}
					</view>
				</view>
			</view>
		</block>
		<!-- 搜索数据展示列表 -->
		<view class="search_list_box">
			<view class="search_item" v-for="(item, i) in goodsList" :key="i" @click="gotoGoodsDetail(item)">
				{{item.goods_name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				goodsList: [],
				histortList: [],
				isShow: true,
				timer: null
			};
		},
		onLoad(){
			this.histortList = JSON.parse(uni.getStorageSync('keyword'))
		},
		methods: {
			getFocus(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.keyword = e
					this.isShow = false
					this.getSearchData()
				},800)
				this.$emit('click')
			},
			async getSearchData(){
				// console.log(this.histortList);
				if(this.keyword === ''){
					this.goodsList = []
					this.isShow = true
					return
				}
				this.addHistory()
				const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch', {query: this.keyword})
				this.goodsList = res.message
			},
			addHistory(){
				this.histortList.unshift(this.keyword)
				uni.setStorageSync('keyword', JSON.stringify(this.histortList))
			},
			search_ipt(e){
				this.keyword = e
			},
			gotoGoodsDetail(e){
				uni.navigateTo({
					url: `../../subpkg/goods_detail/goods_detail?goods_id=${e.goods_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.search_box{
		// width: 80%;
		margin: 0 auto; 
		padding-bottom: 20rpx;
		background-color: #eeeeee;	
		.search{
			padding: 0 30rpx;
		}
	}	
	
	.search_item{
		padding: 0 50rpx;
		font-size: 25rpx;
		border-bottom: 1rpx solid #eee;
		height: 60rpx;
		line-height: 60rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.history_box{
		margin: 0 30rpx;
		.history_tit{
			border-bottom: 1rpx solid #eee;
			// height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.history_list{
			view{
				font-size: 25rpx;
				width: auto;
				padding: 0 30rpx;
				display: inline-block;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 15rpx;
				background-color: #e3e3e3;
				margin: 0 20rpx 20rpx 0;
			}
		}
	}
</style>
